<template>
  <div>
    <el-button slot="reference" @click="showTable">登记违纪</el-button>
    <el-table :data="tableData">
      <el-table-column prop="occurrenceTime" label="日期" width="120" :formatter="formatDate">
      </el-table-column>
      <el-table-column prop="studentName" label="学生姓名" width="120">
      </el-table-column>
      <el-table-column prop="leaderName" label="审批领导" width="120">
      </el-table-column>
      <el-table-column prop="dormitoryAdminName" label="登记宿管" width="120">
      </el-table-column>
      <el-table-column prop="reason" label="原因" width="200">
      </el-table-column>
      <el-table-column prop="grade" label="扣分" width="200">
      </el-table-column>
      <el-table-column prop="state" label="状态" width="180">
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total=totalNum>
      </el-pagination>
    </div>
    <el-dialog title="登记违纪信息" :visible.sync="dialogFormVisible">
      <el-form :data="sendDisciplineForm">
        <el-form-item prop="occurrenceTime" label="日期:" width="140">
          <div class="block">
            <el-date-picker
                v-model="sendDisciplineForm.occurrenceTime"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item prop="student" label="姓名:" width="120">
          <el-select v-model="sendDisciplineForm.student" placeholder="请选择学生">
            <el-option
                v-for="item in students"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="reason" label="原因:" width="120">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="sendDisciplineForm.reason">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getStudent, createdIndiscipline, getIndiscipline} from '../../../api/dormitory_admin'

export default {
  data () {
    return {
      pageNo: 1,
      pageSize: 5,
      totalNum: 0,
      DOT: {
        pageNo: 1,
        pageSize: 5,
        data: {
          dormitoryAdminID: JSON.parse(localStorage.getItem('user')).id.toString()
        }
      },
      sendDisciplineForm: {
        student: '',
        occurrenceTime: '',
        dormitoryAdmin: '',
        reason: '',
        state: ''
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      isCompleted: true,
      tableData: [],
      students: [],
      pickerOptions: {
        disabledDate (time) {
          const today = new Date()
          today.setHours(23, 59, 59, 999)
          return time.getTime() > today.getTime()
        }
      }
    }
  },
  methods: {
    formatDate (row) {
      const date = new Date(row.occurrenceTime)
      const beijingTime = new Date(date.getTime())
      const year = beijingTime.getFullYear()
      const month = (beijingTime.getMonth() + 1).toString().padStart(2, '0')
      const day = beijingTime.getDate().toString().padStart(2, '0')
      return `${year}年${month}月${day}日`
    },
    queryStudent () {
      let obj = {
        id: JSON.parse(localStorage.getItem('user')).id.toString()
      }
      getStudent(obj).then(res => {
        this.students = res.data
      })
    },
    queryIndiscipline () {
      getIndiscipline(this.DOT).then(res => {
        this.tableData = res.data
        this.totalNum = res.otherData.totalNum
      })
    },
    handleCurrentChange (newPage) {
      this.DOT.pageNo = newPage
      this.pageNo = newPage
      this.queryIndiscipline()
    },
    showTable (row) {
      this.dialogFormVisible = true
      console.log(row)
    },
    sendData () {
      this.sendDisciplineForm.dormitoryAdmin = JSON.parse(localStorage.getItem('user')).id.toString()
      this.sendDisciplineForm.student = this.sendDisciplineForm.student.toString()
      this.sendDisciplineForm.state = '处理中'
      this.dialogFormVisible = false
      createdIndiscipline(this.sendDisciplineForm).then(res => {
        if (res.data === 'Success') {
          this.queryIndiscipline()
          this.$message({
            message: '成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '失败',
            type: 'error'
          })
        }
      })
    }
  },
  created () {
    this.queryStudent()
    this.queryIndiscipline()
  }
}
</script>
<style scoped>
</style>
